import React, { useState, useEffect } from 'react';
import {
  Box,
  Drawer,
  Stack,
  Chip,
  Button,
  FormControl,
  Grid,
  TextField,
  Select,
  MenuItem,
  InputLabel,
} from '@material-ui/core';
import FilterAltIcon from '@mui/icons-material/FilterAlt';
import ReplayIcon from '@mui/icons-material/Replay';

const TableForm = ({ columns }) => {
  const [] = useState({});

  return (
    <Grid
      container
      sx={{
        px: 10,
        py: 5,
      }}
      spacing={[5, 3]}
    >
      <Grid item xs={4}>
        <FormControl fullWidth={true}>
          <InputLabel>供应商</InputLabel>
          <Select label={'供应商'} fullWidth={true}>
            <MenuItem value={1}>供应商1</MenuItem>
            <MenuItem value={2}>供应商2</MenuItem>
            <MenuItem value={3}>供应商3</MenuItem>
          </Select>
        </FormControl>
      </Grid>
      <Grid item xs={4}>
        <FormControl fullWidth={true}>
          <InputLabel>融资产品</InputLabel>
          <Select label={'融资产品'} fullWidth={true}>
            <MenuItem value={1}>内容1</MenuItem>
            <MenuItem value={2}>内容2</MenuItem>
            <MenuItem value={3}>内容3</MenuItem>
          </Select>
        </FormControl>
      </Grid>
      <Grid item xs={4}>
        <FormControl fullWidth={true}>
          <TextField label={'融资编号'} />
        </FormControl>
      </Grid>
      <Grid item xs={4}>
        <FormControl fullWidth={true} placeholder={'请输入结算单号'}>
          <TextField label={'结算单号'} />
        </FormControl>
      </Grid>
      <Grid item xs={4}>
        <FormControl fullWidth={true}>
          <TextField label={'付款金额（元）'} />
        </FormControl>
      </Grid>
      <Grid item xs={4}>
        <FormControl fullWidth={true}>
          <TextField label={'付款申请单号'} />
        </FormControl>
      </Grid>
    </Grid>
  );
};

const FilterDrawer = () => {
  const [visible, setVisible] = useState(false);

  const onClose = () => setVisible(false);

  return (
    <Box>
      <Button
        variant={'contained'}
        endIcon={<FilterAltIcon />}
        onClick={() => setVisible(true)}
      >
        筛选
      </Button>
      <Drawer anchor={'top'} open={visible} onClose={onClose}>
        <TableForm />
        <Stack
          direction={'row'}
          justifyContent={'flex-end'}
          spacing={3}
          sx={{
            px: 10,
            pb: 3,
          }}
        >
          <Button variant={'outlined'} onClick={onClose}>
            取 消
          </Button>
          <Button variant={'contained'} onClick={onClose}>
            提 交
          </Button>
        </Stack>
      </Drawer>
    </Box>
  );
};

export const ToolBar = ({ fetch }) => {
  const [conditions, setConditions] = useState([
    '供应商：曹文军的公司',
    '融资产品：e快付',
  ]);

  return (
    <Stack
      direction={'row'}
      justifyContent={'space-between'}
      sx={{
        px: 2,
        pt: 2,
        pb: 1,
      }}
    >
      <Stack direction={'row'} spacing={1}>
        {conditions.map((condition, index) => (
          <Chip
            key={index}
            label={condition}
            onDelete={(event) => {
              setConditions((data) =>
                data.filter((item, idx) => idx !== index),
              );
            }}
          />
        ))}
      </Stack>
      <Stack direction={'row'} spacing={2}>
        <Button onClick={() => fetch()} endIcon={<ReplayIcon />}>
          刷新
        </Button>
        <FilterDrawer />
      </Stack>
    </Stack>
  );
};
